<template>
	<view class="ex-mall-page" :class="[$themeClass('panel-another-content-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">预约信息</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
				</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-checkbox-circle-line"
							:class="[$themeClass('search-btn-color')]"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title">
				<view class="icon ri-checkbox-circle-line"></view>
				<view v-if="order.status === 2" class="msg">已取消</view>
				<view v-else-if="order.shipStatusName" class="msg">{{ order.shipStatusName }}</view>
				<view v-else class="msg">加载中...</view>
			</view>
			<u-form v-if="Object.keys(order).length !== 0" class="form" :label-width="200" :model="order" ref="uForm">
				<u-form-item label="预约号"><u-input v-model="order.code" disabled /></u-form-item>
				<u-form-item label="预约时间"><u-input :value="`${order.time} | ${order.timeRange}`" disabled /></u-form-item>
				<u-form-item label="创建时间"><u-input v-model="order.createTime" disabled /></u-form-item>
				<u-form-item label="商品数量"><u-input v-model="order.goodsCount" disabled /></u-form-item>
				<u-form-item label="预约金额"><u-input v-model="'￥ ' + order.totalAmount" disabled /></u-form-item>
<!--				<u-form-item label="预约信息"><u-input v-model="order.receiverName + ', ' + order.receiverPhone" disabled /></u-form-item>-->
				<u-form-item label="商户地址">
					<u-input v-if="order.shippingAddress" v-model="order.shippingAddress" disabled />
				</u-form-item>
				<u-form-item label="备注">
					<u-input v-if="order.remark" v-model="order.remark" disabled />
				</u-form-item>
			</u-form>
			<view class="goodsList" style="margin-bottom: 10% !important;" v-if="order.associatedGoods">
				<view class="item" :key="index" v-for="(id, index) in Object.keys(JSON.parse(order.associatedGoods))">
					<view class="thumbnail">
						<image @tap="previewImage(JSON.parse(order.associatedGoods)[id].info.pictureUrl.split(',')[0])" class="img" mode="aspectFill"
							:src="JSON.parse(order.associatedGoods)[id].info.pictureUrl.split(',')[0]"></image>
					</view>
					<view class="info">
						<view>{{JSON.parse(order.associatedGoods)[id].info.goodsName}}</view>
						<view v-if="JSON.parse(order.associatedGoods)[id].info.value">
							<view class="spec" :key="i" v-for="(styleKey, i) in Object.keys(JSON.parse(JSON.parse(order.associatedGoods)[id].info.value))">
								<span v-if="i === 0">{{JSON.parse(JSON.parse(order.associatedGoods)[id].info.value)[styleKey]}}</span>
								<span v-else><span v-html="'&nbsp;-&nbsp;'"></span>{{JSON.parse(JSON.parse(order.associatedGoods)[id].info.value)[styleKey]}}</span>
							</view>
						</view>
            <view v-if="JSON.parse(order.associatedGoods)[id].info.price" class="price" :class="[$themeClass('goods-price-color')]">￥{{ JSON.parse(order.associatedGoods)[id].info.price * JSON.parse(order.associatedGoods)[id].count }}
              （￥{{ JSON.parse(order.associatedGoods)[id].info.price }} * {{ JSON.parse(order.associatedGoods)[id].count }}）
            </view>
            <view v-else class="price" :class="[$themeClass('goods-none-color')]"></view>
					</view>
				</view>
        <view class="item" style="height: 100px"></view>
			</view>
		</view>

    <view class="footer">
      <view class="remove" v-if="authority && authority === 'business'">
        <view class="btn" v-if="order.shipStatus === 4" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]" @click="statusChange(0)">恢复预约</view>
        <view class="btn" v-else-if="order.shipStatus === 5" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]" @click="statusChange(0)">恢复预约</view>
        <view class="btns" v-else>
          <view class="btn spec" @click="statusChange(5)">
            <text>取消 </text>
            <text class="icon ri-delete-bin-5-fill"></text>
          </view>
          <view class="btn buy" @click="statusChange(4)" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
            <view class="label">取货完成</view>
          </view>
        </view>
      </view>
      <view class="remove" v-else>
        <view class="btn" v-if="order.shipStatus === 4" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">已完成</view>
        <view class="btn" v-else :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]" @click="cancel">取消预约</view>
      </view>
    </view>
	</view>
</template>

<script>
	import UForm from "../../libs/uview-ui/components/u-form/u-form";
	import UFormItem from "../../libs/uview-ui/components/u-form-item/u-form-item";
	import UInput from "../../libs/uview-ui/components/u-input/u-input";
  import {cancel, detail, statusChange} from "../../api/order";
  import util from "../../common/js/util";

  export default {
		components: {
			UInput,
			UFormItem,
			UForm
		},
		data() {
			return {
				order: {},
        authority: '',
			}
		},
		onLoad(options) {
      this.authority = uni.getStorageSync('authority')
			this.getOrderInfo(options.id)
		},
		onReady() {
			// #ifdef H5
			if (navigator.userAgent.indexOf('Mobile') === -1) {
				document.querySelector('body').setAttribute('style', 'width: 420px;margin: 0px auto;position: relative;')
			}
			// #endif
		},
		methods: {
			previewImage(imgUrl) {
				const imgsArray = [];
				imgsArray[0] = imgUrl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			getOrderInfo(id) {
        detail(id).then(async (res) => {
					this.order = res.data
				})
			},
      statusChange(status) {
        let content = '确定完成预约?'
        if (status === 0) {
          content = '确定恢复预约?'
        } else if (status === 5) {
          content = '确定取消预约?'
        }
        uni.showModal({
          title: '提示',
          content: content,
          success: (res) => {
            if(res.confirm) {
              statusChange(this.order.id, status).then(async (res) => {
                console.log(res)
                if (res.code === 200) {
                  uni.showToast({
                    icon: 'none',
                    title: '操作成功!'
                  })
                  setTimeout(() => {
                    this.$switchTab('index')
                  }, 500)
                }
              }).catch(e => {
                console.log(e)
                uni.showToast({
                  icon: 'none',
                  title: e
                })
              })
            } else {
              console.log('cancel') //点击取消之后执行的代码
            }
          }
        })
      },
      cancel() {
        uni.showModal({
          title: '提示',
          content: '确定取消预约？',
          success: (res) => {
            if(res.confirm) {
              cancel(this.order.id).then(async (res) => {
                console.log(res)
                if (res.code === 200) {
                  uni.showToast({
                    icon: 'none',
                    title: '取消预约成功!'
                  })
                  setTimeout(() => {
                    this.$switchTab('index')
                  }, 500)
                }
              }).catch(e => {
                console.log(e)
                uni.showToast({
                  icon: 'none',
                  title: e
                })
              })
            } else {
              console.log('cancel') //点击取消之后执行的代码
            }
          }
        })
      }
		}
	}
</script>

<style lang="scss">
  .u-form-item {
    margin-left: 20px;
  }
	.content {
		.title {
			display: flex;
			align-items: center;
			margin: 20px 40px;

			&>.icon {
				color: #60D6D1;
				font-size: 18px;
			}

			&>.msg {
				margin-left: 10px;
				font-size: 18px;
			}
		}

		&>.form {
			margin: 0 40px;
			font-size: 15px;
			color: lightgrey;
		}

		&>.goodsList {
      bottom: 10%;
			&>.item {
				display: flex;
				align-items: center;
				margin: 20px 40px;

				&>.thumbnail {
					&>.img {
						width: 100px;
						height: 100px;
						background-color: #F8E3DC;
						border-radius: 12px;
					}
				}

				&>.info {
					margin-left: 20px;
					font-size: 15px;
					color: lightgrey;
				}
			}
		}
	}

  .footer {
    position: fixed;
    bottom: 0;
    z-index: 2;
    padding: 18px 28px calc(18px + (env(safe-area-inset-bottom) / 2)) 28px;
    background-color: #FFFFFF;
    border-radius: 34px 34px 0 0;
    overflow: hidden;
    width: 100%;

    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 58px;
      padding: 0 28px;
      border-radius: 12px;
      box-sizing: border-box;
    }

    &>.submit {
      &>.label {
        font-size: 15px;
        font-weight: 600;
      }

      &>.amount {
        font-size: 14px;
      }
    }

    &>.remove {
      &>.btn {
        justify-content: center;
      }

      &>.btns {
        display: flex;

        &>.btn {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 54px;
          font-size: 13px;
          font-weight: 600;
          border-radius: 12px;

          &.spec {
            flex: 0.4;
            border: 1px solid #292929;
            box-sizing: border-box;

            &>.icon {
              font-size: 16px;
            }
          }

          &.buy {
            flex: 0.6;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>